<template>
    <div>
        <button @click="stopTimer">stop</button>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            start: {
                latitude: 30.849635,
                longitude: -83.24559
            },
            end: {
                latitude: 27.950575,
                longitude: -82.457178
            },
            // 以下模拟动态数据
            timer: null //定时器
        };
    },
    mounted() {
        // this.countDemo();
        // this.testDynamic();
        this.testDynamicInJs();
    },
    methods: {
        computerDistance(start, end) {
            const haversine = require('haversine');
            return haversine(start, end).toFixed(2);// km
        },
        countDemo() {
            console.log(this.computerDistance(this.start, this.end));
            // console.log(this.computerDistance(
            //     {
            //         latitude: 34.800485,
            //         longitude: 113.534383
            //     },
            //     {
            //         latitude: 34.795685,
            //         longitude: 113.557405
            //     }
            // ));
            // console.log(this.computerDistance(
            //     {
            //         latitude: 34.800485,
            //         longitude: 113.534383
            //     },
            //     {
            //         latitude: 34.755952,
            //         longitude: 113.659566
            //     }
            // ));

            // console.log(this.computerDistance(
            //     {
            //         latitude: 34.759277,
            //         longitude: 113.779147
            //     },
            //     {
            //         latitude: 39.016807,
            //         longitude: 121.607440
            //     }
            // ));

            // console.log(this.computerDistance(
            //     {
            //         latitude: 35.748741,
            //         longitude: 114.296265
            //     },
            //     {
            //         latitude: 34.702389,
            //         longitude: 113.034554
            //     }
            // ));
        },
        // 以下模拟动态数据
        testDynamic() {
            const startPoint = [34.800485, 113.534383];
            let pointList = [];//坐标列表
            let speedList = [];//速度列表
            let distanceList = [];

            pointList.push(startPoint);

            this.timer = setInterval(() => {
                let randomNum = Math.floor(Math.random() * 10) + 1;

                let len = pointList.length;

                // 新坐标点是 pointList 最后一个元素的经纬度各+1
                let newPoint = [pointList[len - 1][0] + randomNum, pointList[len - 1][1] + randomNum];
                pointList.push(newPoint);
                len++;

                // point1 是倒数第二个元素
                const point1 = {
                    latitude: pointList[len - 2][0],
                    longitude: pointList[len - 2][1]
                };
                // point1 是倒数第一个元素
                const point2 = {
                    latitude: pointList[len - 1][0],
                    longitude: pointList[len - 1][1]
                };

                let distanceKm = this.computerDistance(point1, point2);
                let time = 2;
                let speedKmHour = distanceKm / time;

                distanceList.push(distanceKm);
                speedList.push(speedKmHour);

                console.dir(pointList);
                console.log(distanceList);
                console.log(speedList);

            }, 2000);
        },
        stopTimer() {
            clearInterval(this.timer)
        },
        /********************************* 使用js算法 ********************************* */
        /**
         * 角度转弧度
         * 
         *   -- 弧度 = 角度 * Math.PI / 180 
         *  -- 角度 = 弧度 * 180 / Math.PI
         */
        convertRadians(angle) {
            return angle * Math.PI / 180;
        },
        computeDistanceInJs(start, end) {
            // 把对象转为4个参数
            let lat1 = start.latitude;
            let lon1 = start.longitude;
            let lat2 = end.latitude;
            let lon2 = end.longitude;

            // 角度转弧度
            let dLat = this.convertRadians(lat2 - lat1);
            let dLon = this.convertRadians(lon2 - lon1);

            let a = Math.pow(Math.sin(dLat / 2), 2) + Math.cos(this.convertRadians(lat1)) * Math.cos(this.convertRadians(lat2)) * Math.pow(Math.sin(dLon / 2), 2);
            let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            let distance = 6371 * c; // 计算距离（单位：千米）
            distance = Math.round(distance * 100) / 100; // 保留2位小数（单位：千米）
            return distance; // 千米
        },
        testDynamicInJs() {
            const startPoint = [34.800485, 113.534383];
            let pointList = [];//坐标列表
            let speedList = [];//速度列表
            let distanceList = [];

            pointList.push(startPoint);

            this.timer = setInterval(() => {
                let randomNum = Math.floor(Math.random() * 10) + 1;

                let len = pointList.length;

                // 新坐标点是 pointList 最后一个元素的经纬度各+1
                let newPoint = [pointList[len - 1][0] + randomNum, pointList[len - 1][1] + randomNum];
                pointList.push(newPoint);
                len++;

                // point1 是倒数第二个元素
                const point1 = {
                    latitude: pointList[len - 2][0],
                    longitude: pointList[len - 2][1]
                };
                // point1 是倒数第一个元素
                const point2 = {
                    latitude: pointList[len - 1][0],
                    longitude: pointList[len - 1][1]
                };

                let distanceKm = this.computeDistanceInJs(point1, point2);

                let time = 2;
                let speedKmHour = distanceKm / time;

                distanceList.push(distanceKm);
                speedList.push(speedKmHour);

                console.dir(pointList);
                console.log(distanceList);
                console.log("speedList -- ", speedList);
            }, 2000);
        },
    },
}
</script>
<style scoped></style>